<template>
  <el-dialog :visible.sync="visible" width="85%" @close="cancel">
    <div v-loading="loading">
      <el-form :ref="formName" :model="form" label-width="100px">
        <el-row>
          <mainTilte title="出运单基本信息" />
        </el-row>
        <billForm :form-data="info" />
        <div v-if="form.products.length > 0">
          <el-row>
            <mainTilte title="清单商品明细信息" />
          </el-row>
          <el-table :data="form.products" stripe fit border class="mb24">
            <el-table-column prop="purchase_order_code" label="采购单号" width="180" align="center" />
            <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
            <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
            <el-table-column prop="number" label="采购数量" width="180" align="center" />
            <el-table-column prop="sub_number" label="转运数量" width="180" align="center" />
            <el-table-column prop="trans_number" label="到仓数量" width="200" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`products.${scope.$index}.trans_number`" :rules="transNumberRule" class="no-label mt22">
                  <el-input-number v-model="scope.row.trans_number" :precision="0" :min="1" placeholder="请输入到仓数量" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="delivery_date" label="交货日期" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
            <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
            <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            <el-table-column prop="notes" label="备注" width="200" align="center" />
          </el-table>
        </div>
        <div v-if="form.parts.length > 0">
          <el-row>
            <mainTilte title="清单配件明细信息" />
          </el-row>
          <el-table :data="form.parts" stripe fit border class="mb24">
            <el-table-column prop="purchase_order_code" label="采购申请单号" width="180" align="center" />
            <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
            <el-table-column prop="goods_code" label="配件编码" width="180" align="center" />
            <el-table-column prop="number" label="采购数量" width="180" align="center" />
            <el-table-column prop="sub_number" label="转运数量" width="180" align="center" />
            <el-table-column label="到仓数量" prop="trans_number" width="200" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`parts.${scope.$index}.trans_number`" :rules="transNumberRule" class="no-label mt22">
                  <el-input-number v-model="scope.row.trans_number" :precision="0" :min="1" placeholder="请输入到仓数量" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="delivery_date" label="交货日期" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
            <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            <el-table-column prop="notes" label="备注" width="200" align="center" />
          </el-table>
        </div>
      </el-form>
      <div class="dialog-footer-center">
        <span>
          <el-button type="primary" :loading="btnLoading" @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import billForm from './billForm'
export default {
  name: 'ArriveConfirm',
  components: {
    billForm
  },
  data() {
    return {
      visible: false,
      id: '', // id
      info: {}, // 详情
      loading: false,
      formName: 'form',
      form: {
        id: '',
        products: [], //
        parts: []
      },
      transNumberRule: [
        { required: true, message: '请输入到仓数量', trigger: 'blur' }
      ],
      btnLoading: false
    }
  },
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.visible = true
      vm.getInfo(id)
    },
    // 关闭
    cancel() {
      const vm = this
      vm.visible = false
      vm.form.id = ''
      vm.form.products = []
      vm.form.parts = []
    },
    // 获取详情
    getInfo(id) {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/transhipment-order/${id}`)
        .then((res) => {
          vm.info = res.data
          const { products, parts } = res.data
          vm.form.id = id
          vm.form.products = products.map(e => {
            e['sub_number'] = e.trans_number
            e['trans_number'] = 1
            return e
          })
          vm.form.parts = parts.map(e => {
            e['sub_number'] = e.trans_number
            e['trans_number'] = 1
            return e
          })
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 提交表单
    submit() {
      const vm = this
      vm.$refs[vm.formName].validate(valid => {
        if (valid) {
          vm.btnLoading = true
          const { id, products, parts } = vm.form
          const formProducts = products.concat(parts).map(e => {
            const obj = {
              id: e.id,
              trans_number: e.trans_number
            }
            return obj
          })
          const params = {
            id,
            products: formProducts
          }
          vm.btnLoading = false
          vm.$http.post('/transhipment-order/confirm-arrive', params).then(() => {
            vm.toast()
            vm.cancel()
            vm.$emit('submit')
            vm.btnLoading = false
          }).catch(() => {
            vm.btnLoading = false
          })
        }
      })
    },
    /**
     * 提示用户信息
     * { id: '', code: '', number: '' }
     * */
    toast() {
      const vm = this
      const { products, parts } = vm.form
      const arr = products.concat(parts).reduce((total, item) => {
        const number = item.trans_number - item.sub_number
        if (number > 0) {
          // total.push({
          //   id: item.id,
          //   code: item.goods_code,
          //   number,
          //   type: item.type
          // })
          const content = `${item.type === 1 ? '商品' : '配件'}编码${item.goods_code}，到仓数量比预分仓数量多${number}`
          total.push(content)
        }
        return total
      }, [])
      if (arr.length > 0) {
        vm.$alert(`${arr.join(';')}。请联系出运组进行手工入库操作。`, '提示')
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
